<template>
  <div>
    <!-- 第一行表格 -->
    <div class="table">
      <el-table size="small" :data="baseData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" />
        <el-table-column prop="name" label="名称" />
        <el-table-column label="值">
          <template v-slot="scope">
            <div>
              <img v-if="scope.row.val.indexOf('http') != -1" width="80px" :src="scope.row.val" alt="">
              <span v-else>{{ scope.row.val }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="introduce" label="介绍" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <div>
              <el-tag @click="toedit(scope.row)">修改</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog :title=title :visible.sync="dialogVisible" width="30%">
        <el-form  :model="form"  label-width="200px">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-select v-model="type">
              <el-option label="文字" value="文字" />
              <el-option label="图片" value="图片" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="type === '文字'" label="值" :label-width="formLabelWidth">
            <el-input placeholder="请输入内容" />
          </el-form-item>
          <el-form-item v-else label="封面" :label-width="formLabelWidth">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="系统介绍" :label-width="formLabelWidth">
            <el-input v-model="form.introduce"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tosave()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      baseData: [],
      formLabelWidth: '120px',
      type: '文字',
      imageUrl: '',
      dialogVisible: false,
      title: '修改系统配置',
      form:{}
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    async toedit(row) {
      this.dialogVisible = true;
      this.form = { ...row };
    },
    async tosave() {
      this.dialogVisible = false;
      const res = await post('/baseConfig/saveOrUpdate', this.form)
      this.findAll();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    async findAll() {
      const res = await get('/baseConfig/findAll')
      console.log(res, '获取响应')
      this.baseData = res.data
    }
  }
}
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
